<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slot-插槽的基本使用</title>
</head>

<body>
    <div id="app">
        <!-- 插槽的基本使用 -->
        <!-- <cpn><button>按钮</button></cpn> -->
        <cpn></cpn>
        <!-- 插槽的默认值 -->
        <!-- 当插槽值与默认不同时 可修改-->
        <cpn><span>123</span></cpn>
        <cpn><i>123</i></cpn>
        <cpn></cpn>
        <div>==========================</div>
        <!-- 如果有多个值，同时放入到组件替换时，以其作为替换元素 -->
        <cpn>
            <p>123</p>
            <p>123</p>
            <p>123</p>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>我是组件，hello hello</p>
            <!-- <button>按钮</button> -->
            <!-- 预备插槽 -->
            <!-- <slot></slot> -->

            <!-- 可以给插槽默认值 -->
            <slot><button>按钮</button></slot>


        </div>
    </template>
    <script src="./js/vue.min.js"></script>
    <script>
        const cpn = {
            template:'#cpn',
            data()
            {
                return{

                }
            },
            props:{
                
            }

        }
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            components:{
                cpn
            }
        })
    </script>
</body>

</html>